<div class="container">
    <div class="row">
        <div class="col-md-12">
            <!-- 友情链接 -->
            {if $action=='index'}
            <div class="panel panel-default">
                <div class="panel-body">
                    友情链接： <a href="{$siteUrl}/" title="{$option.siteName}">{$option.siteName}</a>
                    {volist name='links' id='vo'}
                    - <a href="{$vo.url}" title="{$vo.name}">{$vo.name}</a>
                    {/volist}
                </div>
            </div>
            {/if}
            <!-- 版权信息 -->
            <p class="text-center">{$option['copyright']|raw}</p>
            <!-- ICP备案 -->
            <p class="text-center"><a href="https://beian.miit.gov.cn/" rel="nofollow" title="ICP">{$option['icp']}</a>
            </p>
        </div>
    </div>
</div>

<!-- 模态框 -->
<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">登录</h4>
            </div>
            <div class="modal-body">
                <form id="loginForm" style="height: 200px;">
                    <div class="form-group">
                        <label for="inputPhone">手机号</label>
                        <input type="text" class="form-control" name="phone" value="13812345678" id="inputPhone"
                            placeholder="phone">
                    </div>
                    <div class="form-group">
                        <label for="inputPasswrod">密码</label>
                        <input type="password" class="form-control" name="pwd" value="123456" id="inputPasswrod"
                            placeholder="Password">
                    </div>
                    <div class="form-group" style="position: relative;">
                        <button type="submit" class="btn btn-primary pull-right">登录</button>
                        <span class="tips"></span>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- js -->
<script>
    jQuery(document).ready(function ($) {
        // 登录
        $('#loginForm').submit(function (e) {
            e.preventDefault();
            $('#loginForm .tips').html('<span class="glyphicon glyphicon-refresh" aria-hidden="true"></span> 登录中...');
            $.post('/account/dologin', $('#loginForm').serialize(), function (res) {
                if (res.code) return $('#loginForm .tips').html('<span class="glyphicon glyphicon-remove" aria-hidden="true"></span> ' + res.msg);
                $('#loginForm .tips').html('<span class="glyphicon glyphicon-ok" aria-hidden="true"></span> ' + res.msg + '，跳转中...');
                setTimeout(() => { parent.window.location.reload() }, 1000);
            }, 'json');
        });

        // 提交评论
        $('#comment-area').on('submit', '#commentForm', function (e) {
            e.preventDefault();
            var type = $('#commentForm button[type="submit"]').hasClass('cancel');
            $('#commentForm .tips').html('<span class="glyphicon glyphicon-refresh" aria-hidden="true"></span> 提交中...');
            $('#commentForm button[type="submit"]').attr('disabled', true);
            $.post('/comment/save', $('#commentForm').serialize(), function (res) {
                if (res.code) {
                    $('#commentForm .tips').html('<span class="glyphicon glyphicon-remove" aria-hidden="true"></span> ' + res.msg);
                    setTimeout(()=>{
                        $('#commentForm button[type="submit"]').attr('disabled', false);
                        $('#commentForm .tips').html(null);
                    }, 1000);
                    return;
                }
                $('#commentForm .tips').html('<span class="glyphicon glyphicon-ok" aria-hidden="true"></span> ' + res.msg);
                var say = type ? res.data.name + ' 回复：' : '<strong>' + res.data.name + '</strong> <cite>说道：</cite>';
                var pid = type ? res.data.id : 0;
                html = type ? '<hr>' : '<div class="panel panel-default"><div class="panel-body">';
                html += '<div class="media">';
                html += '<div class="media-left">';
                html += '<img class="media-object" style="width: 64px;height: 64px;background-color: #f1f1f1;border-radius: 50%;" src="" alt="...">';
                html += '</div>';
                html += '<div class="media-body">';
                html += '<h4 class="media-heading">' + say + '</h4>';
                html += res.data.comment;
                html += type ? '' : '<p style="text-align: right;"><button type="button" data-id="' + res.data.id + '" class="btn btn-success btn-sm media-right btn-reply"><span class="glyphicon glyphicon-share-alt" aria-hidden="true"></span> 回复</button></p>';
                html += '</div>';
                html += '</div>';
                html += type ? '' : '</div></div>';
                $('#commentForm').after(html);
                $('#commentForm #comment').val(null);
                setTimeout(() => {
                    $('#commentForm .tips').html(null);
                    $('#commentForm button[type="submit"]').attr('disabled', false);
                }, 1000);
                // 回复评论后触发取消回复
                type && $('#comment-area .btn-reply.cancel').trigger('click');
            }, 'json');
        });

        // 回复评论
        $('#comment-area').on('click', '.btn-reply', function (e) {
            var othis = e.target, pid = $(othis).data('id');
            $(othis).toggleClass('cancel');
            if ($(othis).hasClass('cancel')) {
                $(othis).parent().after($('#commentForm'));
                $('#commentForm button[type="submit"]').addClass('cancel').html('@ 回复评论');
                $('<input type="hidden" name="pid" value="' + pid + '">').prependTo($('#commentForm'));
                $('#comment-area .btn-reply').removeClass('cancel').removeClass('btn-danger').addClass('btn-success').html('<span class="glyphicon glyphicon-share-alt" aria-hidden="true"></span> 回复');
                $(othis).addClass('cancel').removeClass('btn-success').addClass('btn-danger').html('取消回复');
            } else {
                $('#comment-area').prepend($('#commentForm'));
                $('#commentForm button[type="submit"]').removeClass('cancel').html('<span class="glyphicon glyphicon-send" aria-hidden="true"></span> 发表评论');
                $('#commentForm').find('input[name="pid"][value="' + pid + '"]').remove();
                $('#comment-area .btn-reply').removeClass('cancel').removeClass('btn-danger').addClass('btn-success').html('<span class="glyphicon glyphicon-share-alt" aria-hidden="true"></span> 回复');
            }
        });

    });

</script>
</body>

</html>